<template>
  <div class="kj-con">
    <img src="../../assets/declare/banner.png" alt="" srcset="" />
    <div class="p-body">
      <div class="tabs" style="width:800px;margin:0 auto">
        <p
          @click="onTabOne(item.value)"
          :class="{ on: curIndexOne == item.value }"
          v-for="(item, index) in monthObjList"
          :key="index"
        >
          {{ item.label }}
        </p>
      </div>
      <div v-if="curIndexOne == 1">
        <div class="bgtext">
          <h1>SPECIAL PLAN</h1>
          <p>专项计划</p>
        </div>
        <div class="card1-box">
          <div class="card1" v-for="(item, index) in list" :key="index">
            <img :src="`http://gccrc.hs620.cn${item.icon}`" alt="" />
            <div>{{ item.title }}</div>
            <div class="btn-box">
              <div>立即进入</div>
              <img src="../../assets/declare/1.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="curIndexOne == 2">
        <div class="bgtext">
          <h1>INCLUSIVE POLICY</h1>
          <p>普惠政策</p>
        </div>
        <div class="card2-box">
          <div class="card2">
            <div class="btn-box">
              <div>立即进入</div>
              <img src="../../assets/declare/1.png" alt="" />
            </div>
          </div>
          <div class="card2">
            <div class="btn-box">
              <div>立即进入</div>
              <img src="../../assets/declare/1.png" alt="" />
            </div>
          </div>
        </div>
        <div class="grid">
          <div class="grid-item" v-for="(v, i) in imgList" :key="i">
            <img :src="v.path" alt="" style="width:55px" />
            <div>{{ v.label }}</div>
          </div>
        </div>
      </div>
      <div v-if="curIndexOne == 3">
        <div class="bgtext">
          <h1>MEASURES</h1>
          <p>配套举措</p>
        </div>
        <div class="tabs" style="width:800px;margin:0 auto">
          <p
            @click="onTabTwo(item.value)"
            :class="{ on: curIndexTwo == item.value }"
            v-for="(item, index) in fotList"
            :key="index"
          >
            {{ item.label }}
          </p>
        </div>
        <div class="list">
          <img
            :src="v.img"
            alt=""
            v-for="(v, index) in curImgList"
            :key="index"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      monthObjList: [
        { value: "1", label: "专项计划" },
        { value: "2", label: "普惠政策" },
        { value: "3", label: "配套举措" }
      ],
      curIndexOne: 1,
      imgList: [
        { path: require("../../assets/declare/g0.png"), label: "人才购房券" },
        {
          path: require("../../assets/declare/g1.png"),
          label: "一次性综合补贴"
        },
        { path: require("../../assets/declare/g2.png"), label: "人才公寓" },
        { path: require("../../assets/declare/g3.png"), label: "商业贷款优惠" },
        {
          path: require("../../assets/declare/g4.png"),
          label: "公积金政策优惠"
        }
      ],
      fotList: [
        { value: "0", label: "人才引进" },
        { value: "1", label: "人才激励" },
        { value: "2", label: "人才流动" },
        { value: "3", label: "人才评价" }
      ],
      curIndexTwo: 0,
      fotImgList: [
        [
          {
            id: "0",
            img: require("../../assets/declare/l00.png"),
            color: "",
            text: ""
          },
          {
            id: "1",
            img: require("../../assets/declare/l01.png"),
            color: "",
            text: ""
          }
        ],
        [
          {
            id: "2",
            img: require("../../assets/declare/l10.png"),
            color: "",
            text: ""
          },
          {
            id: "3",
            img: require("../../assets/declare/l11.png"),
            color: "",
            text: ""
          }
        ],
        [
          {
            id: "4",
            img: require("../../assets/declare/l20.png"),
            color: "",
            text: ""
          },
          {
            id: "5",
            img: require("../../assets/declare/l21.png"),
            color: "",
            text: ""
          }
        ],
        [
          {
            id: "6",
            img: require("../../assets/declare/l30.png"),
            color: "",
            text: ""
          }
        ]
      ],
      curImgList: [],
      pageSize: [2, 8, 2, 2],
      list: []
    };
  },
  created() {
    this.curImgList = this.fotImgList[0];

    this.getPlantList();
  },
  methods: {
    async getPlantList() {
      const res = await this.$store.dispatch("user/getPlantList", {
        pageNum: 1,
        pageSize: this.pageSize[this.curIndexOne - 1],
        planCode: this.curIndexOne
      });
      this.list = res.rows;
      console.log(res);
    },
    onTabOne(ind) {
      this.curIndexOne = ind;
      this.getPlantList()
    },
    onTabTwo(ind) {
      this.curIndexTwo = ind;
      this.curImgList = this.fotImgList[ind];
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
